import { darken } from '../../../dist/theme/tools';
import { knnoSwitch, Splitter, vars } from '../imports';

export function SplitterPage() {
	let leftDiv: HTMLElement;
	let topDiv: HTMLElement;
	let width: number;
	let height: number;
	let spliter: Splitter;
	return (
		<>
			<h2>分割条</h2>
			<div style={{ height: '500px', display: 'flex' }}>
				<div
					ref={(r) => (leftDiv = r)}
					style={{
						backgroundColor: darken(vars.color.windowBackground),
						width: '400px',
						wordBreak: 'break-all',
						overflow: 'hidden',
						boxSizing: 'border-box',
					}}
				>
					左侧的部分1
				</div>
				<Splitter
					type="horizontal"
					onMoveStart={() => {
						width = leftDiv.offsetWidth;
					}}
					onMove={(detail) => {
						const newWidth = width + detail.distance;
						leftDiv.style.width = newWidth + 'px';
					}}
				/>
				<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
					<div
						ref={(r) => (topDiv = r)}
						style={{ height: '200px', background: vars.color.panelBackground }}
					>
						右侧上半部分
					</div>
					<Splitter
						ref={(r) => (spliter = r)}
						type="vertical"
						disabled
						onMoveStart={() => {
							height = topDiv.offsetHeight;
						}}
						onMove={(detail) => {
							const newHeight = height + detail.distance;
							topDiv.style.height = newHeight + 'px';
						}}
					/>
					<div style={{ flex: 1, background: vars.color.panelBackground, padding: '1em' }}>
						右侧下半部分，允许移动：
						<input
							type="checkbox"
							class={knnoSwitch}
							checked={false}
							onClick={function (e) {
								spliter.setDisabled(!this.checked);
							}}
						/>
					</div>
				</div>
			</div>
		</>
	);
}
